React memo: تسلط بر مموایزیشن کامپوننت و بهینه‌سازی رندر

در دنیای توسعه React، عملکرد از اهمیت بالایی برخوردار است. با افزایش پیچیدگی برنامه‌ها، اطمینان از رندر روان و کارآمد به طور فزاینده‌ای حیاتی می‌شود. یکی از ابزارهای قدرتمند در زرادخانه توسعه‌دهندگان React برای دستیابی به این هدف، React.memo است. این پست وبلاگ به پیچیدگی‌های React.memo می‌پردازد و هدف، کاربرد و بهترین شیوه‌ها برای بهینه‌سازی عملکرد رندر را بررسی می‌کند.

مموایزیشن کامپوننت چیست؟

مموایزیشن کامپوننت یک تکنیک بهینه‌سازی است که از رندرهای غیرضروری یک کامپوننت زمانی که props آن تغییر نکرده است، جلوگیری می‌کند. با به خاطر سپردن خروجی رندر شده برای مجموعه‌ای از props، React می‌تواند در صورتی که props ثابت بماند، از رندر مجدد کامپوننت صرف‌نظر کند که منجر به بهبود عملکرد قابل توجهی می‌شود، به خصوص برای کامپوننت‌هایی که محاسبات سنگین دارند یا به طور مکرر رندر می‌شوند.

بدون مموایزیشن، کامپوننت‌های React هر زمان که کامپوننت والدشان رندر مجدد شود، دوباره رندر می‌شوند، حتی اگر propsهایی که به کامپوننت فرزند منتقل شده‌اند تغییر نکرده باشند. این می‌تواند منجر به یک آبشار از رندرهای مجدد در سراسر درخت کامپوننت شود و بر عملکرد کلی برنامه تأثیر بگذارد.

معرفی React.memo

React.memo یک کامپوننت مرتبه بالاتر (HOC) است که توسط React ارائه شده و یک کامپوننت تابعی را مموایز می‌کند. این اساساً به React می‌گوید که خروجی کامپوننت را برای یک مجموعه از props "به خاطر بسپارد" و فقط در صورتی که props واقعاً تغییر کرده باشند، کامپوننت را دوباره رندر کند.

React.memo چگونه کار می‌کند

React.memo به صورت سطحی (shallowly) props فعلی را با props قبلی مقایسه می‌کند. اگر props یکسان باشند (یا اگر یک تابع مقایسه سفارشی true برگرداند)، React.memo از رندر مجدد کامپوننت صرف‌نظر می‌کند. در غیر این صورت، کامپोनنت را به طور معمول رندر می‌کند.

کاربرد پایه React.memo

برای استفاده از React.memo، به سادگی کامپوننت تابعی خود را با آن بپوشانید:

            import React from 'react';

const MyComponent = (props) => {
  // Component logic
  return (
    <div>
      {props.data}
    </div>
  );
};

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

در این مثال، MyComponent تنها در صورتی رندر مجدد می‌شود که prop data تغییر کند. اگر prop data ثابت بماند، React.memo از رندر مجدد کامپوننت جلوگیری می‌کند.

درک مقایسه سطحی (Shallow Comparison)

همانطور که قبلاً ذکر شد، React.memo یک مقایسه سطحی از props انجام می‌دهد. این بدان معناست که فقط ویژگی‌های سطح بالای اشیاء و آرایه‌هایی که به عنوان props منتقل می‌شوند را مقایسه می‌کند. این به صورت عمیق محتویات این اشیاء یا آرایه‌ها را مقایسه نمی‌کند.

مقایسه سطحی بررسی می‌کند که آیا ارجاع‌ها (references) به اشیاء یا آرایه‌ها یکسان هستند یا خیر. اگر اشیاء یا آرایه‌هایی را به عنوان props منتقل می‌کنید که به صورت درون خطی (inline) ایجاد یا جهش (mutate) یافته‌اند، React.memo احتمالاً آن‌ها را متفاوت در نظر می‌گیرد، حتی اگر محتوایشان یکسان باشد، که منجر به رندرهای غیرضروری می‌شود.

مثال: دام‌های مقایسه سطحی

            import React, { useState } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // This will cause MyComponent to re-render every time
    // because a new object is created on each click.
    setData({ ...data });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

در این مثال، حتی اگر ویژگی name در شیء data تغییر نکند، MyComponent همچنان با هر بار کلیک روی دکمه، رندر مجدد می‌شود. این به این دلیل است که با هر کلیک، یک شیء جدید با استفاده از عملگر spread ({ ...data }) ایجاد می‌شود که منجر به یک ارجاع متفاوت می‌شود.

تابع مقایسه سفارشی

برای غلبه بر محدودیت‌های مقایسه سطحی، React.memo به شما اجازه می‌دهد تا یک تابع مقایسه سفارشی را به عنوان آرگومان دوم ارائه دهید. این تابع دو آرگومان می‌گیرد: props قبلی و props بعدی. اگر props برابر باشند (به این معنی که کامپوننت نیازی به رندر مجدد ندارد) باید true برگرداند و در غیر این صورت false.

نحو (Syntax)

            React.memo(MyComponent, (prevProps, nextProps) => {
  // Custom comparison logic
  return true; // Return true to prevent re-render, false to allow re-render
});

            

              
                Copy
              
            
          

مثال: استفاده از تابع مقایسه سفارشی

            import React, { useState, useCallback } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
}, (prevProps, nextProps) => {
  // Only re-render if the name property changes
  return prevProps.data.name === nextProps.data.name;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // This will only cause MyComponent to re-render if the name changes
    setData({ ...data, age: data.age + 1 });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

در این مثال، تابع مقایسه سفارشی فقط بررسی می‌کند که آیا ویژگی name از شیء data تغییر کرده است یا خیر. بنابراین، MyComponent تنها در صورتی رندر مجدد می‌شود که name تغییر کند، حتی اگر ویژگی‌های دیگر در شیء data به‌روز شوند.

چه زمانی از React.memo استفاده کنیم

در حالی که React.memo می‌تواند یک ابزار بهینه‌سازی قدرتمند باشد، مهم است که از آن با دقت استفاده شود. اعمال آن بر روی هر کامپوننت در برنامه شما می‌تواند به دلیل سربار مقایسه سطحی، در واقع به عملکرد آسیب برساند.

استفاده از React.memo را در سناریوهای زیر در نظر بگیرید:

• کامپوننت‌هایی که به طور مکرر رندر می‌شوند: اگر یک کامپوننت اغلب رندر مجدد می‌شود، حتی زمانی که props آن تغییر نکرده است، React.memo می‌تواند تعداد رندرهای غیرضروری را به طور قابل توجهی کاهش دهد.
• کامپوننت‌های با محاسبات سنگین: اگر یک کامپوننت محاسبات پیچیده‌ای انجام می‌دهد یا مقدار زیادی داده را رندر می‌کند، جلوگیری از رندرهای غیرضروری می‌تواند عملکرد را بهبود بخشد.
• کامپوننت‌های خالص (Pure components): اگر خروجی یک کامپوننت صرفاً توسط props آن تعیین می‌شود، React.memo گزینه مناسبی است.
• هنگام دریافت props از کامپوننت‌های والد که ممکن است به طور مکرر رندر شوند: کامپوننت فرزند را مموایز کنید تا از رندر غیرضروری آن جلوگیری شود.

از استفاده از React.memo در سناریوهای زیر خودداری کنید:

• کامپوننت‌هایی که به ندرت رندر مجدد می‌شوند: سربار مقایسه سطحی ممکن است از مزایای مموایزیشن بیشتر باشد.
• کامپوننت‌هایی با props که به طور مکرر تغییر می‌کنند: اگر props دائماً در حال تغییر باشند، React.memo از رندرهای زیادی جلوگیری نخواهد کرد.
• کامپوننت‌های ساده با منطق رندر حداقلی: دستاوردهای عملکردی ممکن است ناچیز باشد.

ترکیب React.memo با سایر تکنیک‌های بهینه‌سازی

React.memo اغلب در ترکیب با سایر تکنیک‌های بهینه‌سازی React برای دستیابی به حداکثر بهبود عملکرد استفاده می‌شود.

useCallback

useCallback یک هوک React است که یک تابع را مموایز می‌کند. این هوک یک نسخه مموایز شده از تابع را برمی‌گرداند که تنها در صورتی تغییر می‌کند که یکی از وابستگی‌های آن تغییر کرده باشد. این به ویژه هنگام انتقال توابع به عنوان props به کامپوننت‌های مموایز شده مفید است.

بدون useCallback، یک نمونه تابع جدید در هر رندر کامپوننت والد ایجاد می‌شود، حتی اگر منطق تابع ثابت بماند. این باعث می‌شود React.memo prop تابع را به عنوان تغییر یافته در نظر بگیرد و منجر به رندرهای غیرضروری شود.

مثال: استفاده از useCallback با React.memo

            import React, { useState, useCallback } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <button onClick={props.onClick}>Click Me</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <MyComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

در این مثال، useCallback تضمین می‌کند که تابع handleClick تنها زمانی که وضعیت count تغییر می‌کند، دوباره ایجاد می‌شود. این از رندر غیرضروری MyComponent هنگام رندر مجدد کامپوننت والد به دلیل به‌روزرسانی وضعیت count جلوگیری می‌کند.

useMemo

useMemo یک هوک React است که یک مقدار را مموایز می‌کند. این هوک یک مقدار مموایز شده را برمی‌گرداند که تنها در صورتی تغییر می‌کند که یکی از وابستگی‌های آن تغییر کرده باشد. این برای مموایز کردن محاسبات پیچیده یا داده‌های مشتق شده که به عنوان props به کامپوننت‌های مموایز شده منتقل می‌شوند، مفید است.

مشابه useCallback، بدون useMemo، محاسبات پیچیده در هر رندر مجدداً اجرا می‌شوند، حتی اگر مقادیر ورودی تغییر نکرده باشند. این می‌تواند به طور قابل توجهی بر عملکرد تأثیر بگذارد.

مثال: استفاده از useMemo با React.memo

            import React, { useState, useMemo } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data}</div>;
});

const ParentComponent = () => {
  const [input, setInput] = useState('');

  const data = useMemo(() => {
    // Simulate a complex calculation
    console.log('Calculating data...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return input + result;
  }, [input]);

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <MyComponent data={data} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

در این مثال، useMemo تضمین می‌کند که مقدار data تنها زمانی که وضعیت input تغییر می‌کند، دوباره محاسبه می‌شود. این از رندر غیرضروری MyComponent جلوگیری می‌کند و از اجرای مجدد محاسبات پیچیده در هر رندر کامپوننت والد جلوگیری می‌کند.

مثال‌های عملی و مطالعات موردی

بیایید چند سناریوی واقعی را در نظر بگیریم که در آن‌ها می‌توان از React.memo به طور مؤثر استفاده کرد:

مثال ۱: بهینه‌سازی کامپوننت آیتم لیست

تصور کنید یک کامپوننت لیست دارید که تعداد زیادی آیتم لیست را رندر می‌کند. هر آیتم لیست داده‌ها را به عنوان props دریافت و نمایش می‌دهد. بدون مموایزیشن، هر بار که کامپوننت لیست رندر مجدد می‌شود (مثلاً به دلیل به‌روزرسانی وضعیت در کامپوننت والد)، همه آیتم‌های لیست نیز دوباره رندر می‌شوند، حتی اگر داده‌های آن‌ها تغییر نکرده باشد.

با پوشاندن کامپوننت آیتم لیست با React.memo، می‌توانید از رندرهای غیرضروری جلوگیری کرده و عملکرد لیست را به طور قابل توجهی بهبود بخشید.

مثال ۲: بهینه‌سازی یک کامپوننت فرم پیچیده

یک کامپوننت فرم با چندین فیلد ورودی و منطق اعتبارسنجی پیچیده را در نظر بگیرید. این کامپوننت ممکن است برای رندر از نظر محاسباتی سنگین باشد. اگر فرم به طور مکرر رندر مجدد شود، می‌تواند بر عملکرد کلی برنامه تأثیر بگذارد.

با استفاده از React.memo و مدیریت دقیق propsهای منتقل شده به کامپوننت فرم (مثلاً استفاده از useCallback برای کنترل‌کننده‌های رویداد)، می‌توانید رندرهای غیرضروری را به حداقل رسانده و عملکرد فرم را بهبود بخشید.

مثال ۳: بهینه‌سازی کامپوننت نمودار

کامپوننت‌های نمودار اغلب شامل محاسبات و منطق رندر پیچیده‌ای هستند. اگر داده‌های منتقل شده به کامپوننت نمودار به طور مکرر تغییر نکنند، استفاده از React.memo می‌تواند از رندرهای غیرضروری جلوگیری کرده و واکنش‌پذیری نمودار را بهبود بخشد.

بهترین شیوه‌ها برای استفاده از React.memo

برای به حداکثر رساندن مزایای React.memo، این بهترین شیوه‌ها را دنبال کنید:

• برنامه خود را پروفایل کنید: قبل از اعمال React.memo، از ابزار Profiler در React برای شناسایی کامپوننت‌هایی که باعث گلوگاه‌های عملکردی می‌شوند، استفاده کنید. این به شما کمک می‌کند تا تلاش‌های بهینه‌سازی خود را بر روی حیاتی‌ترین بخش‌ها متمرکز کنید.
• عملکرد را اندازه‌گیری کنید: پس از اعمال React.memo، بهبود عملکرد را اندازه‌گیری کنید تا اطمینان حاصل شود که واقعاً تفاوتی ایجاد می‌کند.
• از توابع مقایسه سفارشی با دقت استفاده کنید: هنگام استفاده از توابع مقایسه سفارشی، اطمینان حاصل کنید که کارآمد هستند و فقط ویژگی‌های مربوطه را مقایسه می‌کنند. از انجام عملیات سنگین در تابع مقایسه خودداری کنید.
• استفاده از ساختارهای داده تغییرناپذیر (immutable) را در نظر بگیرید: ساختارهای داده تغییرناپذیر می‌توانند مقایسه prop را ساده کرده و جلوگیری از رندرهای غیرضروری را آسان‌تر کنند. کتابخانه‌هایی مانند Immutable.js می‌توانند در این زمینه مفید باشند.
• از useCallback و useMemo استفاده کنید: هنگام انتقال توابع یا مقادیر پیچیده به عنوان props به کامپوننت‌های مموایز شده، از useCallback و useMemo برای جلوگیری از رندرهای غیرضروری استفاده کنید.
• از ایجاد شیء به صورت درون خطی (inline) خودداری کنید: ایجاد اشیاء به صورت درون خطی به عنوان props، مموایزیشن را دور می‌زند، زیرا در هر چرخه رندر یک شیء جدید ایجاد می‌شود. برای جلوگیری از این کار از useMemo استفاده کنید.

جایگزین‌های React.memo

در حالی که React.memo یک ابزار قدرتمند برای مموایزیشن کامپوننت است، رویکردهای دیگری نیز وجود دارد که می‌توانید در نظر بگیرید:

• PureComponent: برای کامپوننت‌های کلاسی، PureComponent عملکردی مشابه React.memo ارائه می‌دهد. این کامپوننت یک مقایسه سطحی از props و state را قبل از رندر مجدد انجام می‌دهد.
• Immer: Immer یک کتابخانه است که کار با داده‌های تغییرناپذیر را ساده می‌کند. این به شما امکان می‌دهد داده‌ها را با استفاده از یک API قابل تغییر (mutable) به صورت تغییرناپذیر (immutable) اصلاح کنید، که می‌تواند هنگام بهینه‌سازی کامپوننت‌های React مفید باشد.
• Reselect: Reselect کتابخانه‌ای است که انتخاب‌گرهای (selectors) مموایز شده برای Redux ارائه می‌دهد. می‌توان از آن برای استخراج کارآمد داده‌ها از Redux store و جلوگیری از رندرهای غیرضروری کامپوننت‌هایی که به آن داده‌ها وابسته هستند، استفاده کرد.

ملاحظات پیشرفته

مدیریت Context و React.memo

کامپوننت‌هایی که از React Context استفاده می‌کنند، هر زمان که مقدار context تغییر کند، رندر مجدد می‌شوند، حتی اگر props آنها تغییر نکرده باشد. این می‌تواند هنگام استفاده از React.memo یک چالش باشد، زیرا اگر مقدار context به طور مکرر تغییر کند، مموایزیشن دور زده خواهد شد.

برای حل این مشکل، استفاده از هوک useContext را در یک کامپوننت غیرمموایز شده در نظر بگیرید و سپس مقادیر مربوطه را به عنوان props به کامپوننت مموایز شده منتقل کنید. این به شما امکان می‌دهد کنترل کنید که کدام تغییرات context باعث رندر مجدد کامپوننت مموایز شده می‌شوند.

اشکال‌زدایی مشکلات React.memo

اگر هنگام استفاده از React.memo با رندرهای مجدد غیرمنتظره‌ای مواجه شدید، چند مورد وجود دارد که می‌توانید بررسی کنید:

• تأیید کنید که props واقعاً یکسان هستند: از console.log یا یک دیباگر برای بازرسی props استفاده کنید و اطمینان حاصل کنید که قبل و بعد از رندر مجدد واقعاً یکسان هستند.
• ایجاد شیء به صورت درون خطی را بررسی کنید: از ایجاد اشیاء به صورت درون خطی به عنوان props خودداری کنید، زیرا این کار مموایزیشن را دور می‌زند.
• تابع مقایسه سفارشی خود را بازبینی کنید: اگر از یک تابع مقایسه سفارشی استفاده می‌کنید، مطمئن شوید که به درستی پیاده‌سازی شده و فقط ویژگی‌های مربوطه را مقایسه می‌کند.
• درخت کامپوننت را بررسی کنید: از React's DevTools برای بازرسی درخت کامپوننت و شناسایی کامپوننت‌هایی که باعث رندرهای مجدد می‌شوند، استفاده کنید.

نتیجه‌گیری

React.memo یک ابزار ارزشمند برای بهینه‌سازی عملکرد رندر در برنامه‌های React است. با درک هدف، کاربرد و محدودیت‌های آن، می‌توانید به طور مؤثر از آن برای جلوگیری از رندرهای غیرضروری و بهبود کارایی کلی برنامه‌های خود استفاده کنید. به یاد داشته باشید که از آن با دقت استفاده کنید، آن را با سایر تکنیک‌های بهینه‌سازی ترکیب کنید و همیشه تأثیر عملکردی را اندازه‌گیری کنید تا اطمینان حاصل شود که واقعاً تفاوتی ایجاد می‌کند.

با اعمال دقیق تکنیک‌های مموایزیشن کامپوننت، می‌توانید برنامه‌های React روان‌تر و پاسخ‌گوتری ایجاد کنید که تجربه کاربری بهتری را ارائه می‌دهند.

مطالعه بیشتر و منابع

• مستندات React.memo
• بهینه‌سازی عملکرد در React
• useMemo and useCallback